<template>
	<div id="app">
	
		<el-button @click="handleAddDrug" style="background-color: #666ee8;color: white;margin-right: -1000px;"><i class="el-icon-circle-plus">新增挂号</i></el-button>
		<hr />
		<el-row>
		    <el-col :span="6">
				<el-button @click="ofirst" style="width: 100px;margin-left: 10px;">未就诊</el-button>
			</el-col>
			<el-col :span="6">
				<el-button @click="otwo" style="width: 100px;margin-left: -415px;">已就诊</el-button>
			</el-col>
			<el-col :span="6">
				<el-button @click="othree" style="width: 100px;margin-left: -840px;">退号</el-button>
		    </el-col>
			<el-col :span="6">
				<el-button @click="ofour" style="width: 100px;margin-left: -1140px;">全部</el-button>
			</el-col>
		</el-row>
		<!--=================================== 查询 =================================== -->
		<el-form :inline="true" :model="searchForm" class="demo-form-inline" style="width: 1350px;">
			<el-form-item label="挂号科室" style="margin-right: 50px;">
				<el-select v-model="searchForm.drugtypeId" placeholder="请选择" style="width: 150px;">
					<el-option label="全部" value=""></el-option>
					<el-option v-for="drugtype in drugtypeList" :key="drugtype.id" :label="drugtype.name" :value="drugtype.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="挂号医生" style="margin-right: 50px;">
				<el-select v-model="searchForm.drugstatusId" placeholder="请选择" style="width: 150px;">
					<el-option label="全部" value=""></el-option>
					<el-option v-for="drugstatus in drugstatusList" :key="drugstatus.id" :label="drugstatus.name" :value="drugstatus.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间" style="margin-right: 50px;">
				<el-date-picker v-model="searchForm.createTime" type="daterange" range-separator="-" start-placeholder="开始日期"
				 end-placeholder="结束日期" style="width: 250px;">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-input v-model="searchForm.searchName" placeholder="请输入患者名称" style="width: 300px;"></el-input>
			</el-form-item>
			<el-form-item style="margin-right: 60px;">
				<el-button style="background-color: #666ee8;margin-left: -10px;color: white;" @click="handleSearch"><i class="el-icon-search"></i></el-button>
			</el-form-item>
		</el-form>
		<!--=================================== 列表 =================================== -->
		<el-table :data="tableData"  :header-cell-style="{background:'#c2c5f6',color:'black'}">
			<el-table-column type="index" :index="indexMethod" label="序号" >
			</el-table-column>
			<el-table-column prop="id" label="序号" style="color: mediumpurple;">
			</el-table-column>
			<el-table-column prop="oddnumbers" label="挂号单号" >
			</el-table-column>
			<el-table-column prop="sname" label="患者姓名">
			</el-table-column>
			<el-table-column prop="ssex" label="性别">
			</el-table-column>
			<el-table-column prop="sage" label="年龄">
			</el-table-column>
			<el-table-column prop="sphone" label="手机号码">
			</el-table-column>
			<el-table-column prop="sbname" label="科室" >
			</el-table-column>
			<el-table-column prop="dname" label="接诊医生">
			</el-table-column>
			<el-table-column prop="mtime" label="接诊时间" >
			</el-table-column>
			<el-table-column prop="receivable" label="应收金额（元）" >
			</el-table-column>
			<el-table-column prop="netreceipts" label="实收金额（元）" >
			</el-table-column>
			<el-table-column prop="msnameu" label="就诊状态">
			</el-table-column>
			<el-table-column label="操作" width="120px">
				<template v-slot="scope">
					<el-link type="primary" :underline="false" @click="handleUpd(scope.row)" style="margin-right: 30px;color: #666ee8;">编辑</el-link>
					<el-link type="primary" :underline="false" @click="handleDrugstatus(scope.row)" style="color: #666ee8;">就诊</el-link>
					<el-link type="primary" :underline="false" @click="handleDrugstatus1(scope.row)" style="color: #666ee8;">退号</el-link>
					
					{{scope.row.mstatus}}
					<
				</template>
			</el-table-column>
		</el-table>
		<!--=================================== 分页 =================================== -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
			 :page-sizes="sizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				drugtypeList: [],
				drugstatusList: [],
				searchForm: {
					drugtypeId: '',
					drugstatusId: ''
				},
				total: 0,
				current: 1,
				size: 3,
				sizes: [3, 5, 10],
				tableData: [],
				mstatus:0
			}
		},
		created() {
			this.initData();
			this.initDrugtypeList();
			this.initDrugstatusList();
		},
		methods: {
			ofirst(){
				this.mstatus=1
				this.initData();
			},
			otwo(){
				this.mstatus=2
				this.initData();
			},
			othree(){
				this.mstatus=3
				this.initData();
			},
			ofour(){
				this.mstatus=0;
				this.initData();
			},
			handleAddDrug() {
				this.$router.replace({
					path: '/registrationPerson'
				});
			},
			handleUpd(row) {
				this.$router.replace({
					path: '/drug_addDrug',
					query: {
						drugData: row,
						upd: 1
					}
				});
			},
			handleDrugstatus(row) {
				

			},
			handleDrugstatus1(row) {
				console.log(row)
				
			},
			handleSearch() {
				this.current = 1;
				this.initData();
			},
			initData() {
				this.axios.get('http://localhost:9999/registration/registration/list', {
					params: {
						current: this.current,
						size: this.size,
						subjectId: this.searchForm.drugtypeId,
						doctorId: this.searchForm.drugstatusId,
						sname: this.searchForm.searchName,
						mstatus:this.mstatus,
						begintime: this.searchForm.createTime ? this.searchForm.createTime[0] : '',
						endtime: this.searchForm.createTime ? this.searchForm.createTime[1] : ''
					}
				}).then(res => {
					/* console.log(res.data); */
					if (res.data) {
						this.tableData = res.data.obj.records;
						this.total = res.data.obj.total;
					}
				})
			},
			initDrugtypeList() {
				this.axios.get('http://localhost:9999/registration/subject/list').then(res => {
					/* console.log(res.data); */
					if (res.data) {
						this.drugtypeList = res.data;
					}
				})
			},
			initDrugstatusList() {
				this.axios.get('http://localhost:9999/registration/doctor/list').then(res => {
					/* console.log(res.data); */
					if (res.data) {
						this.drugstatusList = res.data;
					}
				})
			},
			indexMethod(index) {
				return index + 1;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val;
				this.initData();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val;
				this.initData();
			}
		}
	};
</script>
